<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" class="stretch">
                <div class="head-container">
                    <el-input
                        v-model="deptName"
                        placeholder="请输入部门名称"
                        clearable
                        size="small"
                        prefix-icon="el-icon-search"
                        style="margin-bottom: 20px"
                    />
                </div>
                <!-- <div class="head-container"> -->
                <el-scrollbar class="head-container my-scroll">
                    <el-tree
                        :data="deptOptions"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        :highlight-current="true"
                        ref="tree"
                        default-expand-all
                        @node-click="handleNodeClick"
                    >
                        <span class="span-ellipsis" slot-scope="{ node }">
                            <span :title="node.label">{{ node.label }}</span>
                        </span>
                    </el-tree>
                </el-scrollbar>
                <!-- </div> -->
            </el-col>
            <!--用户数据-->
            <el-col :span="20">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    :inline="true"
                    label-width="75px"
                >
                    <el-form-item label="姓名" prop="userName">
                        <el-input
                            v-model="queryParams.userName"
                            placeholder="请输入用户名称"
                            clearable
                            size="small"
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="userList">
                    <el-table-column
                        label="姓名"
                        align="center"
                        prop="nickName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column label="姓别" align="center" prop="sex">
                    </el-table-column>
                    <el-table-column
                        label="手机号"
                        align="center"
                        prop="phoneNum"
                    >
                    </el-table-column>
                    <el-table-column label="照片" align="center" prop="photo">
                        <template slot-scope="scope">
                            <img
                                class="photo"
                                v-if="scope.row.photo"
                                :src="scope.row.photo"
                                alt=""
                                srcset=""
                            />
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="单位/部门"
                        align="center"
                        prop="deptName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="培训次数"
                        align="center"
                        prop="projectCount"
                        width="164"
                    />
                    <el-table-column
                        label="累计学时"
                        align="center"
                        prop="alreadyPeriod"
                        width="110"
                        :formatter="formatDuring"
                    />
                    <el-table-column
                        label="操作"
                        align="center"
                        width="150"
                        class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="lookDetail(scope.row)"
                                >查看详情</el-button
                            >
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-key"
                                @click="handleExport(scope.row)"
                                >导出</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { formatDuring } from '@/utils/validate'
import { userRecords, exportUserArchives } from '@/api/system/train'
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: 'trainUserRecord',
    components: { Treeselect },
    data () {
        return {
            loading: false,
            deptName: '',
            defaultProps: {
                children: "children",
                label: "label"
            },
            deptOptions: undefined,
            userList: [],
            total: 0,
            queryParams: {
                userName: '',
                pageNum: 1,
                pageSize: 10
            },
            formatDuring: null
        }
    },
    created () {
        this.formatDuring = formatDuring
        this.getList();
        this.getTreeselect();
    },
    methods: {
        /** 查询部门下拉树结构 */
        getTreeselect () {
            treeselect().then(response => {
                this.deptOptions = response.data;
            });
        },
        // 筛选节点
        filterNode (value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleNodeClick (data) {
            this.queryParams.deptId = data.id;
            this.handleQuery()
        },
        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        getList () {
            this.loading = true;
            userRecords(this.queryParams).then(response => {
                this.userList = response.data;
                this.total = response.total;
                this.loading = false;
            });
        },
        /**
         * 查看详情
         */
        lookDetail (row) {
            this.$router.push({
                path: `/educationtrain/trainRecord/trainRecordDetail`,
                query: {
                    id: row.userId
                }
            })
        },
        /** 导出按钮操作 */
        handleExport (row) {
            this.$confirm('是否确认导出当前数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return exportUserArchives({
                    deptId: row.projectId,
                    ids: [row.userId]
                });
            }).then(response => {
                this.download(response.msg);
            }).catch(function () { });
        }
    }
}
</script>
<style scoped>
/* .span-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} */
.my-scroll {
    height: 600px;
}
.photo {
    max-width: 40px;
    max-height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
<style>
.stretch .el-tree {
    width: 100%;
}

.stretch .el-tree > .el-tree-node {
    display: inline-block;
    min-width: 100%;
}
</style>
